<template>
  <div class="login">
    <img class="bg" src="../images/login-bg.png"/>
    <div class="welcome">注册</div>
    <div>
      <div class="fancy-label login-inp">
        <input type="text" id="username" v-model="uname" required>
        <label for="username">用户名</label>
      </div>
      <div class="fancy-label login-inp">
        <input type="password" id="password" v-model="pwd" required>
        <label for="password">密码</label>
      </div>
      <div class="fancy-label login-inp">
        <input type="password" id="password2" v-model="pwd2" required>
        <label for="password2">再次输入密码</label>
      </div>
      <div class="fancy-label login-inp">
        <input type="text" id="nickname" v-model="nickname" required>
        <label for="nickname">昵称</label>
      </div>
      <div class="fancy-label login-inp">
        <input type="number" id="phone" v-model="phone" required>
        <label for="phone">电话号码</label>
      </div>
      <div class="login-inp" @click="cheack_n_p"><a href="#" >注册</a></div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';

  export default {
    name: 'registered',
    data () {
      return {
        nickname: '',
        uname: '',
        pwd: '',
        pwd2: '',
        phone: ''
      };
    },
    mounted () {
      if (this.getLogin) {
        this.$router.replace('/myzone');
      }
    },
    computed: {
      ...mapGetters([
        'getLogin',
        'getuname',
        'getpwd'
      ])
    },
    methods: {
      cheack_n_p () {
        if (this.uname === '' || this.pwd === '' || this.nickname === '' || this.pwd2 === '' || this.phone === '') {
          alert('输入不能为空');
          return;
        }
        if (this.phone.length !== 11) {
          alert('请输入11位有效电话号码!');
          return;
        }
        if (this.pwd !== this.pwd2) {
          alert('两次密码不一致！');
        } else {
          this.$http
            .get(
              this.global.url + 'pos/reg?name=' + this.nickname + '&username=' + this.uname + '&password=' + this.pwd + '&imei=' + this.global.imei + '&phone=' + this.phone,
              {},
            {
              emulateJSON: true,
              header: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }
            )
            .then(response => {
              response = response.body;
              if (response.code === 1) {
                alert('注册成功！');
                let userAgent = navigator.userAgent;
                if (userAgent.indexOf('Firefox') !== -1 || userAgent.indexOf('Chrome') !== -1) {
                  window.location.href = '';
                } else if (userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1) {
                  window.opener = null; window.open('', '_self', '').close();
                } else {
                  window.opener = null;
                  window.open('', '_self');
                  window.close();
                }
              } else {
                alert('注册失败！');
              }
            });
        }
      }
    },
    components: {
    }
  };
</script>

<style lang="less" scoped>

  .fancy-label {
    position: relative;
    margin-bottom: 1rem !important;
  }
  .fancy-label label {
    text-align: left !important;
    position: absolute;
    top: .1rem;
    left: 8%;
    padding: 0 5px;
    -webkit-transition: top .5s, font-size .3s;
    transition: top .5s, font-size .3s;
  }
  .fancy-label input {
    height: 1.3rem;
    padding: 0 12px;
  }
  .fancy-label input:hover + label, .fancy-label input:focus + label, .fancy-label input:valid + label {
    top: -.7rem;
    font-size: .5rem !important;
  }
  label {
    color: #000;
    //background: #fff;
    font-size: .8rem !important;
  }
  input {
    color: #000;
    /*border: 10px solid #289afa !important;*/
    background: #fff;
    width: 80% !important;
    outline: 0;
    font-size: .8rem !important;
  }
  body > div {
    padding: 1rem 0 0 1rem;
  }

  .login{
    width:100%;
    height:100%;
    position:fixed;
    /*z-index:-10;*/
    .bg{
      width:100%;
      height:100%;
      position:absolute;
      right: 0;
      z-index:-10;
    }
  }
  .login-inp{
    margin:0 1rem 15px 1rem;
    border:4px solid #fff;
    border-radius:1rem;
  }
  .login-inp label{
    text-align:center;
    display:inline-block;
    color:#fff;
  }
  .login-inp input{
    line-height:1rem;
    color:#fff;
    background-color:transparent;
    border:none;
    outline: none;
  }
  .login-inp a{
    display:block;
    width:100%;
    text-align:center;
    line-height:1.2rem;
    color:#fff;
    font-size:.8rem;
    letter-spacing:5px;
  }
  .login-txt{
    text-align:center;
    color:#fff;
    font-size: .4rem;
    margin-top: .5rem;
  }
  .login-txt a{
    color:#fff;
    padding:0 .5rem;
  }
  .welcome{
    color: white;
    width:100%;
    margin:8% 0;
    font-size: 1rem;
    text-align: center;
  }

</style>
